<style lang="less" scoped>
    @import './../order/order.less';
    @import 'activity.less';
</style>

<template>
    <Div class="code">
        <Row class="form">
        	<Form>
        		<Col class="order_num">
        			<FormItem>
        				<Label>订单号</Label>
        				<Input placeholder="订单号"></Input>
        			</FormItem>
        		</Col>
	        	<Col class="shop_name">
					<FormItem>
						<Label>活动名称</Label>
						<i-select filterable>
							<Option :value="1"></Option>
						</i-select>
					</FormItem>
				</Col>
	        	<Col class="pay">
					<FormItem>
						<Label>活动门店</Label>
						<i-select>
							<Option :value="1"></Option>
						</i-select>
					</FormItem>
				</Col>
                <Col class="pay">
					<FormItem>
						<Label>支付方式</Label>
						<i-select>
							<Option :value="1"></Option>
						</i-select>
					</FormItem>
				</Col>
	        	<Col class="time">
					<FormItem>
						<Label>支付时间</Label>
						<DatePicker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="开始时间"></DatePicker>
						<span>-</span>
						<DatePicker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="结束时间"></DatePicker>
					</FormItem>
				</Col>
	        	<Col class="seach-btn" :xs="2">
					<Button icon="ios-search">
						查询
					</Button>
				</Col>
        	</Form>
        	
        </Row>
		<Row class="card">
			<Col :lg="6" :md="12" :sm="24" :xs="24">
				<Card shadow>
					<i class="money"></i>
					<Div>
						<h3>实收总金额</h3>
						<h1>
							<CountTo :endVal="3245" :mainStyle="mainStyle"><span slot="leftText">￥</span></CountTo>
						</h1>
					</Div>
				</Card>
			</Col>
			<Col :lg="6" :md="12" :sm="24" :xs="24">
				<Card shadow>
					<i class="order"></i>
					<Div>
						<h3>支付成功笔数</h3>
						<h1>
							<CountTo :endVal="325" :mainStyle="mainStyle"><span slot="rightText">笔</span></CountTo>
						</h1>
					</Div>
				</Card>
			</Col>
            <Col :lg="6" :md="12" :sm="24" :xs="24">
				<Card shadow>
					<i class="fold"></i>
					<Div>
						<h3>优惠总金额</h3>
						<h1>
							<CountTo :endVal="3245" :mainStyle="mainStyle"><span slot="leftText">￥</span></CountTo>
						</h1>
					</Div>
				</Card>
			</Col>
			<Col :lg="6" :md="12" :sm="24" :xs="24">
				<Card shadow>
					<i class="num"></i>
					<Div style="width:60%;">
						<p>
							<span>微信支付</span><span class="fr"><CountTo :endVal="3245" :mainStyle="mainStyle"><span slot="leftText">￥</span></CountTo></span>
						</p>
						<p>
							<span>新大陆支付</span><span class="fr"><CountTo :endVal="3245" :mainStyle="mainStyle"><span slot="leftText">￥</span></CountTo></span>
						</p>
						<p>
							<span>支付宝支付</span><span class="fr"><CountTo :endVal="3245" :mainStyle="mainStyle"><span slot="leftText">￥</span></CountTo></span>
						</p>
					</Div>
				</Card>
			</Col>
		</Row>
		<Row class="table">
            <Col :lg="9">
                <Table :columns="activity_title" :data="activity_data"></Table>
                <Page :total="20" show-elevator show-total :page-size="10" class-name="page"></Page>
            </Col>
            <Col :lg="15">
                <Table :columns="columns" :data="orderList"></Table>
                <Page :total="20" show-elevator show-total :page-size="5" class-name="page"></Page>
            </Col>
			
		</Row>


		<Modal v-model="modal" title="订单详情" :mask-closable="false">
			<ul>
				<li style="padding-bottom:5px;display:inline-block;width:49%;">活动名称：{{ codeName }}</li>
				<li style="padding-bottom:5px;display:inline-block;width:49%;">订单号：{{ orderNum }}</li>
				<li style="padding-bottom:5px;display:inline-block;width:49%;">支付方式：{{ pay }}</li>
				<li style="padding-bottom:5px;display:inline-block;width:49%;">应收金额：{{ payMoney }}</li>
				<li style="padding-bottom:5px;display:inline-block;width:49%;">商家优惠活动：{{ discount }}</li>
				<li style="padding-bottom:5px;display:inline-block;width:49%;">支付状态：{{ payState }}</li>
				<li style="padding-bottom:5px;display:inline-block;width:49%;">支付流水：{{ payNum }} </li>
				<li style="padding-bottom:5px;display:inline-block;width:49%;">支付时间：{{ payTime }}</li>
				<li style="padding-bottom:5px;display:inline-block;width:49%;">支付方式：{{ code }}</li>
				<li style="padding-bottom:5px;display:inline-block;width:49%;">实收金额：{{ money }}</li>
				<li style="padding-bottom:5px;display:inline-block;width:49%;">订单备注：{{ marks }}</li>
			</ul>
			<Div slot="footer"></Div>
		</Modal>
    </Div>
</template>
<script>
	import CountTo from '../count-to/CountTo.vue';
    export default {
		components: {
			CountTo
		},
        name: 'activity_order',
		data(){
			return{
				modal: false,
				endVal: 0,
				codeName: '',
				orderNum: '',
				payNum: '',
				pay: '',
				payTime: '',
				payMoney: '',
				code: '',
				discount: '',
				money: '',
				payState: '',
				marks: '',				
				mainStyle:{
					fontSize: 'inherit',
					fontWeight: 'inherit'
				},
				columns:[
					{
                        title: "订单号",
                        align: 'center',
						key: "order_num"
					},
					{
                        title: "门店名称",
                        align: 'center',
						key: 'shop_name'
					},
					{
                        title: '支付方式',
                        align: 'center',
						key: "pay"
					},
					{
                        title: '支付时间',
                        align: 'center',
						key: 'pay_time'
					},
					{
                        title: '支付状态',
                        align: 'center',
						key: 'pay_state'
					},
					{
                        title: '操作',
                        align: 'center',
						render:(h,params) => {
							return h('Button',{
								props:{
									type: 'text'
								},
								style:{
									color: '#0078ff',
									padding: 0
								},
								on: {
									click: ()=>{
										this.show(params.index)
									}
								}
							},"查看")
						}
					}
				],
				orderList:[
					{
						order_num: 'S89725236512995011',
						shop_name: '蚂蚁嗨客A店',
						code_name: '百人暖心捐赠',
						money: '58.96',
						pay: '支付宝',
						pay_money: '158.00',
						discount: '0.00',
						pay_num: '46846313487964321',
						code: '扫码',
						pay_time: '2017-12-06 12:56',
						pay_state: '支付成功',
						marks: '无'
					},
					{
						order_num: 'S13461321615411',
						shop_name: '蚂蚁嗨客B店',
						code_name: '张三爸',
						money: '558.96',
						pay: '微信',
						pay_money: '1580.00',
						discount: '0.00',
						pay_num: '466545213487964321',
						code: '扫码',
						pay_time: '2017-12-06 12:56',
						pay_state: '支付成功',
						marks: '无'
					}
                ],
                activity_title:[
                    {
                        title: '活动名称',
                        align: 'center',
                        key: 'a_name'
                    },
                    {
                        title: '总金额',
                        align: 'center',
                        key: 'a_money'
                    },
                    {
                        title: '实收金额',
                        align: 'center',
                        key: 'money'
                    },
                    {
                        title: '优惠金额',
                        align: 'center',
                        key: 'fold_money'
                    }
                ],
                activity_data:[
                    {
                        a_name: '百人暖心捐赠',
                        a_money: 1234.10,
                        money: 1233.00,
                        fold_money: 1.12
                    },
                    {
                        a_name: '把爱带回家',
                        a_money: 12304.10,
                        money: 12303.00,
                        fold_money: 10.12
                    }
                ]
			}
		},
		methods:{
			show(index){
				this.modal = true;
				this.codeName = this.orderList[index].code_name;
				this.orderNum = this.orderList[index].order_num;
				this.payNum = this.orderList[index].pay_num;
				this.pay = this.orderList[index].pay;
				this.payTime = this.orderList[index].pay_time;
				this.payMoney = this.orderList[index].pay_money;
				this.code = this.orderList[index].code;
				this.discount = this.orderList[index].discount;
				this.money = this.orderList[index].money;
				this.payState = this.orderList[index].pay_state;
				this.marks = this.orderList[index].marks;
			}
		}
    }
</script>